<template>
  <MainDetails/>
  <BgLine/>
  <SelectBox :map="map" @fartherFn="selectColor" id="bag"/>
  <BackGround>
    <div class="_main">
      <div class="_main_name">—— {{$t("bag.myBag")}} ——</div>
      <div class="_main_1_t">
        <div @click="()=>sel(0)" :class="tab === 0? 'active': ''">{{$t("bag.card")}}</div>
        <div @click="()=>sel(1)" :class="tab === 1? 'active': ''">{{$t("bag.box")}}</div>
      </div>
      <div class="_blind_main_2" v-show="tab===1">
        <div v-for="item in box" :key="item.type" @click="()=> open(item.type)">
          <img :src="item.src" alt="">
          <div class="_blind_img_name">{{item.type === 1? $t("blind.superBox"): item.type === 2?
            $t("blind.specialBox"): $t("blind.commonBox")}}</div>
          <div class="_blind_img_num">X{{item.num}}</div>
        </div>
      </div>
      <div  v-show="tab===0">
        <div class="_main_1">
          <div class="_main_1_ut">
            <div @click="showSelect">{{colorStr}}</div>
            <div @click="powerRank">{{$t("bag.rank")}}<span :class="isPowerAsc? '': 'down'"></span></div>
          </div>
          <div class="_main_1_num">{{$t("bag.total")}}{{hero.length}}{{$t("bag.tickets")}}</div>
        </div>
        <div class="_main_2">
          <div v-for="{heroName,level,levelCombatPower,src, color, id} in hero" :key="id">
            <img :src="modules['/src/assets/Hero/' + color+'.png'].default" alt="" class="bg"/>
            <img :src="src" alt="">
            <div class="_img_name">{{heroName}}</div>
            <div class="_img_level">{{$t("starBegin")}}{{level}}{{$t("star")}}</div>
            <div class="_img_zl">{{$t("power")}}{{levelCombatPower}}</div>
          </div>
        </div>
      </div>
    </div>
  </BackGround>
</template>

<script>
    import BackGround from '@components/BackGroundBox/index.vue';
    import SelectBox from '@components/Select/index.vue';
    import MainDetails from "@components/MainDetails/index.vue";
    import BgLine from '@components/BgLine/index.vue';
    import http from "../../http";
    const modules = import.meta.globEager("/src/assets/Hero/**");
    import pic1 from '@/assets/BuyBlindBox/1.png';
    import pic2 from '@/assets/BuyBlindBox/2.png';
    import pic3 from '@/assets/BuyBlindBox/3.png';
    export default {
      data() {
        return {
          modules: modules,
          colorStr: this.$t("bag.attribution"),
          color: '-1',
          isPowerAsc: true,
          tab:  this.$route.query.tab? this.$route.query.tab * 1: 0,
          hero: [],
          box: [],
          map: {},
          pics: [pic1, pic2, pic3]
        }
      },
      methods: {
        open: function(type){
          this.$router.push("/OpenBlindBox?type=" + type);
        },
        powerRank: function(){
          this.isPowerAsc = !this.isPowerAsc;
          this.getBox();
        },
        selectColor: function({k, v}){
          this.color = k;
          this.colorStr = v;
          this.getBox();
        },
        showSelect: function(){
          this.$store.commit('changeSelectType', "bag");
        },
        getColorMap: async function(){
          let res = await http.get(`/api/user-hero/getColorMap`);
          res.data["-1"] = this.$t("bag.attribution");
          this.map = res.data;
        },
        getBox: async function () {
          if(this.tab === 0){
            let color = this.color;
            let isPowerAsc = this.isPowerAsc;
            let param = "";
            if(color != '-1'){
              param += ('&color=' + color);
            }
            if(isPowerAsc !== ''){
              param += ('&isPowerAsc=' + isPowerAsc);
            }
            if(param !== ''){
              param = "?" + param.substring(1);
            }
            let res = await http.get(`/api/user-hero/myHeroInBag` + param);
            if (res.code === 200) {
              res.data.forEach((item) => {
                item.src = modules['/src/assets/Hero/' + item.color + "/" + item.hero +'.png'].default;
              });
              this.hero = res.data;
            }
          }else{
            let res = await http.get(`/api/blind-box/myBlindBoxList`);
            if (res.code === 200) {
              res.data.forEach((item) => {
                  item.src = this.pics[item.type - 1];
              });
              this.box = res.data;
            }
          }
        },
        sel: function(index){
          this.tab = index;
          this.getBox();
        }
      },
      mounted() {
        this.getColorMap();
        this.getBox();
      },
      components: {
        BackGround,
        MainDetails,
        BgLine,
        SelectBox
      }
    }

</script>

<style scoped lang="scss">
  ._main {
    padding: 18px 15px 0;
  }

  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }

  ._main_1 {
    @include flex;
    margin-top: 22px;
  }

  ._main_1_ut {
    display: flex;

    div {
      width: 92px;
      height: 32px;

      color: $color3;
      font-size: 13px;
      line-height: 34px;
      text-align: left;
      padding-left: 11px;
      margin-right: 29px;

      &:nth-child(1) {
        background: url("@/assets/mypackage/icon_property.png") no-repeat center;
        background-size: cover;
      }

      &:nth-child(2) {
        width: 90px;
        height: 30px;
        border-radius: 3px;
        border: 1px solid #D8BC84;
        line-height: 30px;
        position: relative;

        span {
          width: 12px;
          height: 7px;
          background: url("@/assets/mypackage/icon_select.png") no-repeat center;
          background-size: cover;
          position: absolute;
          right: 8px;
          top: 50%;
          transform: translateY(-50%) rotate(0deg);
          &.down{
            transform: translateY(-50%) rotate(180deg);
          }
        }
      }
    }
  }

  ._main_1_num {
    width: 73px;
    height: 26px;
    background: url("@/assets/mypackage/111.png") no-repeat center;
    background-size: cover;
    font-size: 13px;
    @include fontTCRegular;
    font-weight: 400;
    color: #894801;
    line-height: 26px;
  }

  ._main_1_t {
    @include flex;
    height: 46px;
    width: 100%;
    background-color: #967E64;
    padding: 0 15px;
    margin-top: 15px;

    div {
      color: rgba(216, 188, 132, .45);
      font-size: 15px;
      @include fontSCRegular;

      &.active {
        color: #FFB522;
      }
    }
  }

  ._main_2 {
    width: 100%;
    margin-top: 25px;
    font-size: 0;
    @include flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    > div {
      position: relative;
      width: 103px;
      margin-left: 18px;
      &:nth-child(3n+1){
        margin-left: 0
      }
      img {
        height: 150px;
        width: 103px;
        &.bg{
          position: absolute;
          width:103px;
          height:150px;
          top:0;
          left: 0;
          z-index: 100;
        }
      }
    }
  }

  ._img_name {
    width: 64px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid $color3;
    font-size: 12px;
    @include fontSCRegular;
    color: $color3;
    line-height: 26px;
    margin: 10px auto;
  }

  ._img_level {
    position: absolute;
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFFFFF;
    width: 40px;
    height: 20px;
    line-height: 20px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    top: 10px;
    right: 9px;
  }

  ._img_zl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFB522;
    width: 90px;
    height: 25px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    line-height: 25px;
    top: 115px;
    white-space: nowrap;
  }

  ._blind_main_2 {
    width: 100%;
    margin-top: 24px;
    font-size: 0;
    @include flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    > div {
      position: relative;
      width: 103px;
      margin-left: 18px;
      &:nth-child(3n+1){
        margin-left: 0
      }
      img {
        height: auto;
        width: 103px;
      }
    }
  }

  ._blind_img_name {
    width: 103px;
    height: 26px;
    background: $color3;
    border-radius: 3px;
    font-size: 12px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 26px;
    margin-top: 15px;
  }
  ._blind_img_num {
    font-size: 15px;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 111px;
  }

</style>
